<template>
  <a-card class="storeManage__wrap">
    <template #title>
      <a-row
        :gutter="16"
        type="flex"
        justify="space-between"
      >
        <a-col flex="120px">
          <a-button
            type="primary"
            @click="addOrder"
          >开通版本</a-button>
        </a-col>
        <a-col flex:="1">
          <a-row :gutter="[6,8]">
            <a-col span="xs">创建时间</a-col>
            <a-col
              style="width:240px"
              v-bind="colAttr"
            >
              <a-range-picker
                v-model:value="searchTimeHorizon"
                @change="onSearch"
              />
              <!-- @change="ddd" -->
            </a-col>
            <a-col v-bind="colAttr">
              <a-select
                style="width: 100%"
                placeholder="订单状态"
                allowClear
                v-model:value="searchData.status"
                @change="onSearch"
              >
                <a-select-option value="0">订购成功</a-select-option>
                <a-select-option value="1">待支付</a-select-option>
                <a-select-option value="2">订购已取消</a-select-option>
              </a-select>
            </a-col>
            <a-col v-bind="colAttr">
              <a-select
                style="width: 100%"
                placeholder="支付方式"
                allowClear
                v-model:value="searchData.payType"
                @change="onSearch"
              >
                <a-select-option value="0">扫码/兑换</a-select-option>
                <a-select-option value="1">后台开通</a-select-option>

              </a-select>
            </a-col>

            <a-col v-bind="colAttr">
              <a-select
                style="width: 100%"
                placeholder="订单类型"
                allowClear
                v-model:value="searchData.orderType"
                @change="onSearch"
              >
                <a-select-option value="0">普通订单</a-select-option>
                <a-select-option value="1">邀请码订单</a-select-option>
                <a-select-option value="2">限时活动订单</a-select-option>

              </a-select>
            </a-col>
            <a-col
              v-bind="colAttr"
              style="width:320px;"
            >
              <a-input-search
                allow-clear
                placeholder="输入订单号/店铺名称/员工姓名或手机"
                @search="onSearch"
                v-model:value="searchData.other"
              />
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </template>
    <a-table
      :columns="table.columns"
      :data-source="table.data"
      :pagination="false"
      rowKey="staffId"
      @change="onTableChange"
    >
      <template #shopName="{ text }">
        <span style="color:#1890FF;">{{text}}</span>
      </template>

      <template #staffName="{ record }">
        <span>{{record.staffName}}</span>
        <span v-if="record.staffPhone">[{{record.staffPhone}}]</span>
      </template>

      <template #status="{ text }">
        <span v-if="text == 0">未完成</span>
        <span v-if="text == 1">待支付</span>
        <span v-if="text == 2">订购成功</span>
        <span v-if="text == 3">订购已取消</span>
      </template>
      <template #orderType="{ text }">
        <span v-if="text == 0">普通订单</span>
        <span v-if="text == 1">邀请码订单</span>
        <span v-if="text == 2">限时活动订单</span>
      </template>
      <template #action="{ index }">
        <a-button
          size="small"
          type="link"
          @click="detailOrder(index)"
        >查看</a-button>
      </template>

      <template #payAmount="{ text }">￥{{ text }}</template>
    </a-table>
    <a-row
      style="margin-top: 20px"
      type="flex"
      justify="end"
    >
      <a-pagination
        showSizeChanger
        :total="pagination.total"
        v-model:current="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        :showTotal="() => `共 ${pagination.total} 条数据`"
        @change="getData"
        @showSizeChange="getData"
      />
    </a-row>
  </a-card>
  <detail-drawer
    v-model:visible="drawer.visible"
    :data="drawer.data"
  />
  <!-- :table="drawer.table" -->
  <addorder-drawer
    v-model:visible="drawerTwo.visible"
    :data="drawerTwo.data"
  />

</template>

<script>
import { ref, toRefs, defineComponent, reactive } from 'vue';
import { apiGetShopOrderList } from '@/api/orderManage/index.js';
import shareModal from '@/components/share-modal';
import detail from './components/detail';
import addOrder from './components/addOrder';
import moment from 'moment';
import { parseTime } from '@/utils';
export default defineComponent({
  name: 'orderManage',
  components: {
    shareModal,
    detailDrawer: detail,
    addorderDrawer: addOrder
  },
  setup () {
    const state = reactive({

      colAttr: {
        // xs: 12,
        // sm: 8,
        // md: 6,
        // lg: 4,
        // xl: 3,
      },// 搜索区域栅格化
      drawer: {
        visible: false,
        data: {},
        table: {}
      },
      drawerTwo: {
        visible: false,
        data: {},
      },
      table: {
        columns: [
          {
            title: '订单编号',
            dataIndex: 'orderSn',
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            // sorter: true,
          },
          {
            title: '订购店铺',
            dataIndex: 'shopName',
            // sorter: true,
            slots: { customRender: 'shopName' }
          },
          {
            title: '服务内容',
            dataIndex: 'orderDesc',
            // sorter: true,
          },
          {
            title: '实付金额',
            dataIndex: 'payAmount',
            // sorter: true,
            slots: { customRender: 'payAmount' }
          },
          {
            title: '订单状态',
            dataIndex: 'status',
            // sorter: true,
            slots: { customRender: 'status' }
          },
          {
            title: '订单类型',
            dataIndex: 'orderType',
            // sorter: true,
            slots: { customRender: 'orderType' }
          },
          {
            title: '绑定员工',
            dataIndex: 'staffName',
            // sorter: true,
            slots: { customRender: 'staffName' },
          },
          {
            title: '操作',
            slots: { customRender: 'action' },
          },
        ],
        data: [],
      },
      searchData: {
        startTime: '',
        endTime: '',
        status: undefined,
        payType: undefined,
        orderType: undefined,
        other: '',
        sort: ''
      }, // 搜索数据
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 1,
      },//页码配置
    })


    const getData = async () => {
      const { startTime, endTime } = disposeTime();
      const params = {
        ...state.searchData, // 搜索数据
        ...state.pagination, // 分页数据
        startTime,
        endTime,
      };

      const { code, pageInfo } = await apiGetShopOrderList(params);
      if (code === 200) {
        pageInfo.list.map(item => {
          item.createTime = parseTime(item.createTime, '{y}-{m}-{d} {h}:{m}:{s}')
        })
        state.table.data = pageInfo.list;
        state.pagination.pageNum = pageInfo.pageNum;
        state.pagination.total = pageInfo.total;
      }
    };
    // 排序搜索
    const orderMap = {
      ascend: '0',
      descend: '1',
    };
    const fieldMap = {
      createTimes: 'createTime',
      shopNames: 'shopName',
      orderDescs: 'orderDesc',
      payAmounts: 'payAmount',
      status: 'status',
      orderTypes: 'orderType',
      staffNames: 'staffName',
    };
    // const fieldMap = {
    //   createTimes: 'createTime',
    //   expirationTimes: 'expirationTime',
    //   visitTimes: 'visitTime',
    //   status: 'expirationTime',
    // };

    const onTableChange = (pagination, filters, sorter) => {
      const { field, order } = sorter;
      state.searchData.sortField = order ? fieldMap[field] || field || '' : '';
      state.searchData.sort = orderMap[order] || '';
      onSearch();
    };


    // 搜索时间范围
    const searchTimeHorizon = ref([]);
    // 搜索时间
    const disposeTime = () => {
      const startTime =
        searchTimeHorizon.value[0] &&
        searchTimeHorizon.value[0]._d &&
        searchTimeHorizon.value[0]._d.getTime();

      const endTime =
        searchTimeHorizon.value[1] &&
        searchTimeHorizon.value[1]._d &&
        searchTimeHorizon.value[1]._d.getTime();

      return {
        startTime,
        endTime,
      };
    };


    getData();
    // 进行搜索
    const onSearch = () => {
      state.pagination.pageNum = 1;
      getData();
    };
    // 详情
    const detailOrder = index => {
      const data = state.table.data[index];
      state.drawer.data = data;
      state.drawer.visible = true;
    };
    // 添加订单
    const addOrder = () => {
      console.log('add');
      state.drawerTwo.visible = true;
    };
    return {
      ...toRefs(state),
      detailOrder,
      addOrder,
      onSearch,
      getData,
      onTableChange,
      searchTimeHorizon,

    }
  }
})
</script>
<style lang="less">
</style>
